<script lang='ts' setup>
import { ref, reactive, onMounted } from 'vue'
import { CirclePlus, Edit, Delete } from '@element-plus/icons'
import appMenuServiceApi from '/@/api/org/bean/app-menu'
import { SYSTEM_CONFIG } from '/@/config/system'
import AppMenuFormDialog from './app-menu-form-dialog.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const ElTableRef = ref()

const AppMenuTreeTableState = reactive({
    tableData: [] as any[],
    //加载表格数据
    loadTreeData: () => {
        appMenuServiceApi.queryList(null, { appId: SYSTEM_CONFIG.appId }).then(res => {
            AppMenuTreeTableState.tableData = AppMenuTreeTableState.handleMenuTree(res.data)
        })
    },
    //序号
    indexMethod: (index: number) => index + 1,
    //新增事件
    onAddButtonClick: (row: any) => {
        console.log(row)
        AppMenuTreeTableState.currentParentMenuId = row.menuId
        AppMenuTreeTableState.currentMenuId = ''
        AppMenuTreeTableState.dialogVisible = true
    },
    //修改事件
    onEditButtonClick: (row: any) => {
        AppMenuTreeTableState.currentParentMenuId = ''
        AppMenuTreeTableState.currentMenuId = row.menuId
        AppMenuTreeTableState.dialogVisible = true
    },
    //删除事件
    onDeleteButtonClick: (row: any) => {
        const pkList = [row.menuId]
        ElMessageBox.confirm('此操作将永久删除此菜单, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            appMenuServiceApi.saveMultiDelete(pkList).then(() => {
                ElMessage.success({ message: '菜单删除成功', type: 'success' })
                AppMenuTreeTableState.loadTreeData()
            })
        }).catch(() => {
            ElMessage({ type: 'info', message: '已取消删除', })
        })
    },
    //处理出树形数据
    handleMenuTree: (data: any[]) => {
        //获取首级菜单
        const menuTreeData = data.filter((item) => item.parentMenuId == null)
        if (menuTreeData.length == 0) return []
        menuTreeData.forEach(item => handleTreeData(item, data))
        return menuTreeData
    },
    //当前菜单id 修改时使用
    currentMenuId: '',
    //当前菜单id 新增时赋值
    currentParentMenuId: '',
    /**显示表单dialog */
    dialogVisible: false,
    onSaveSuccess: () => {
        AppMenuTreeTableState.loadTreeData()
    },
})

/**
 * 处理树形数据
 */
function handleTreeData(parentMneu: any, resourceData: any[]) {
    const childrenArr = resourceData.filter(item => item.parentMenuId == parentMneu.menuId)
    if (childrenArr && childrenArr.length > 0) {
        childrenArr.forEach(item => handleTreeData(item, resourceData))
        parentMneu.children = childrenArr
    }
}

defineExpose({
    getCheckedNodes: () => ElTableRef.value.getCheckedNodes()
})

onMounted(() => {
    AppMenuTreeTableState.loadTreeData()
})
</script>
<template>
    <el-table
        class="app-menu-tree-table"
        ref="ElTableRef"
        :data="AppMenuTreeTableState.tableData"
        row-key="menuId"
        border
    >
        <el-table-column
            align="center"
            type="index"
            label="序号"
            width="80px"
            :index="AppMenuTreeTableState.indexMethod"
        />
        <el-table-column prop="menuName" label="菜单名称" class="app-menu-tree-table-name" />
        <el-table-column align="center" prop label="操作" width="300px">
            <template #default="scope">
                <div class="app-menu-tree-table-control">
                    <span
                        class="pointer ml8"
                        @click="AppMenuTreeTableState.onAddButtonClick(scope.row)"
                    >
                        <el-icon color="#409eff">
                            <circle-plus />
                        </el-icon>
                    </span>
                    <span
                        class="pointer ml8"
                        @click="AppMenuTreeTableState.onEditButtonClick(scope.row)"
                    >
                        <el-icon color="#67c23a">
                            <edit />
                        </el-icon>
                    </span>
                    <span
                        class="pointer ml8"
                        @click="AppMenuTreeTableState.onDeleteButtonClick(scope.row)"
                    >
                        <el-icon color="#f56c6c">
                            <delete />
                        </el-icon>
                    </span>
                </div>
            </template>
        </el-table-column>
    </el-table>
    <app-menu-form-dialog
        v-if="AppMenuTreeTableState.dialogVisible"
        v-model:visible="AppMenuTreeTableState.dialogVisible"
        :menu-id="AppMenuTreeTableState.currentMenuId"
        :parent-menu-id="AppMenuTreeTableState.currentParentMenuId"
        @save-success="AppMenuTreeTableState.onSaveSuccess"
    ></app-menu-form-dialog>
</template>

<style scoped lang="scss">
.app-menu-tree-table-control {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
</style>
